<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm ref="formRef" :formList="formList" @submit="search" />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick">
        <template #status_default="{ row }">
          <el-tag :type="row.publish_status == 1 ? 'primary' : 'danger'">
            {{
              row.publish_status == 1
                ? t("account_manage.form.in_use")
                : t("account_manage.form.disabled")
            }}
          </el-tag>
        </template>
      </AuTable>
    </div>

    <AccountModal v-model="showModal" :formData="formData" @submit="search" />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, h, reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { FormulaListProp } from "@/api/teaInfuser/formula";
import { inputProps, selectProps } from "@/components/AuForm/type";
import {
  accountGetList,
  AccountProp,
  accountPublish
} from "@/api/teaInfuser/account";
import AccountModal from "./AccountModal.vue";
import PostModal from "@/views/teaInfuser/account/roleManage/PostModal.vue";
import { useI18n } from "vue-i18n";

defineOptions({
  name: "MaterialData"
});

const { t } = useI18n();

type FormListTuple = [selectProps, inputProps];
// region 声明ref变量集合
const { proxy } = getCurrentInstance();
const formList = ref<FormListTuple>([
  {
    type: "select",
    key: "publish_status",
    label: "account_manage.form.account_status",
    placeholder: "account_manage.form.select_account_status",
    valueKey: "value",
    labelKey: "label",
    options: [
      {
        label: "account_manage.form.all",
        value: ""
      },
      {
        label: "account_manage.form.in_use",
        value: 1
      },
      {
        label: "account_manage.form.disabled",
        value: 0
      }
    ],
    defaultValue: ""
  },
  {
    type: "input",
    key: "account",
    label: "account_manage.form.account_name",
    placeholder: "account_manage.form.enter_account_name"
  }
]);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  showCheckbox: true,
  columns: [
    {
      field: "account",
      title: "account_manage.table.account_name",
      minWidth: 140,
      align: "center"
    },
    {
      field: "post_name",
      title: "account_manage.table.post",
      minWidth: 100,
      align: "center"
    },
    {
      field: "phone",
      title: "account_manage.table.contact",
      minWidth: 120,
      align: "center"
    },
    {
      field: "publish_status",
      title: "account_manage.table.status",
      width: 110,
      slots: {
        default: "status_default"
      },
      align: "center",
      exportMethod: ({ row }) => {
        return row.publish_status == 1
          ? t("account_manage.form.in_use")
          : t("account_manage.form.disabled");
      }
    },
    {
      field: "create_time",
      title: "account_manage.table.add_time",
      width: 170,
      align: "center"
    }
  ],
  actions: [ACTION_TYPE.EDIT, ACTION_TYPE.TADD],
  topTools: [
    {
      key: "enable",
      name: "table.enable",
      plain: true,
      disableHandle: () => tableRef.value?.getCheckboxRecords().length === 0
    },
    {
      key: "disabled",
      name: "table.disabled",
      plain: true,
      status: "danger",
      disableHandle: () => tableRef.value?.getCheckboxRecords().length === 0
    }
  ],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        params.hiddenDeviceType = true;
        return accountGetList(params);
      },
      param: () => formRef.value.getFormData()
    }
  }
});

const showModal = ref(false);
const formData = ref({});
const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合
function batchUpdateShowStatus(list: AccountProp[], status: 1 | 0) {
  const params = {
    idlList: JSON.stringify(list),
    publish_status: status
  };
  accountPublish(params).then(res => {
    if (res.code === 200) {
      proxy.$message.success("操作成功");
      search();
    }
  });
}

// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

type ActionType = {
  key: ACTION_TYPE | string;
  row: FormulaListProp;
};
const actionClick = ({ key, row }: ActionType) => {
  switch (key) {
    case ACTION_TYPE.EDIT:
    case ACTION_TYPE.TADD:
      formData.value = row;
      showModal.value = true;
      break;

    case "enable":
    case "disabled":
      const list = tableRef.value.getCheckboxRecords() as AccountProp[];
      const account = list.map(v => v.account)?.join(", ");
      const enableStr =
        key === "enable"
          ? t("account_manage.table.enable")
          : t("account_manage.table.disable");
      const infoRender =
        key === "disabled"
          ? h("div", {}, [
              h("span", {}, t("account_manage.table.disable_warning")),
              h("br"),
              h("span", {}, t("account_manage.table.disable_warning_item"))
            ])
          : h("span");
      const MessageRender = () =>
        h("div", { class: "pl-[20px]" }, [
          h(
            "span",
            {},
            key === "enable"
              ? t("account_manage.table.enable_confirm", { account })
              : t("account_manage.table.disable_confirm", { account })
          ),
          h("br"),
          infoRender
        ]);
      proxy.$auMessageBox
        .confirm(MessageRender, t("notice.title"), {
          type: key === "enable" ? "warning" : "error"
        })
        .then(() => {
          batchUpdateShowStatus(list, key === "enable" ? 1 : 0);
        });
  }
};
// endregion
</script>
